.visual-mod ul, .visual-mod li{ list-style: none; padding: 0; margin: 0; }
/* 模板-全局-编辑|预览 */
.visual-mod .sign-mod-prev, .visual-mod .sign-mod-edit{ display: none; }
.visual-mod.visual-mod-edit{ padding-bottom: 50px;}
.visual-mod.visual-mod-edit .sign-mod-edit{ display: block;}
.visual-mod.visual-mod-prev .sign-mod-prev{ display: block; }
.visual-mod.visual-mod-edit .temp-opera-l-mod{ display: block;}
.visual-mod.visual-mod-edit .temp-opera-r-mod{ display: block; }

/* 模板-全局 */
.visual-mod{ margin: 0 auto; }
.visual-mod .temp-opera-btn-line{ text-align: right; padding: 12px 20px;}
.visual-mod .temp-opera-btn-line .temp-btn-item{ margin-left: 12px; }
.visual-mod .visual-content-mod{ position: relative; width: 1000px; margin: 0 auto;}
.visual-mod .visual-content-mod:after{ content: ''; clear: both; display: block;}
.visual-mod .temp-move-tool{ display: none; }


/* 表格 */
.visual-mod .common-table-mod{ width: 100%; margin: 0 auto; border-collapse: collapse;}
.visual-mod .common-table-mod td{ min-height: 40px; border: 1px solid #DDD; line-height: 1; padding: 4px 8px; }
.visual-mod .common-table-mod .td-input{ height: 32px; line-height: 1; border: 1px solid #DDD; vertical-align: top; }
.visual-mod .common-table-mod .td-text{ min-height: 32px; line-height: 32px;}
.visual-mod .common-table-mod .common-table-thead{ background-color: #f5f5f5; }

/* 单个容器样式 */
.visual-mod .visual-sign-box{ position: relative; line-height: 1; float: left; letter-spacing: 0;}

/* 编辑模板-编辑模式 */
.visual-mod.visual-mod-edit .tool-opera-layout-c{ letter-spacing: -4px; }
.visual-mod.visual-mod-edit .visual-sign-box{ min-height: 24px;}
.visual-mod.visual-mod-edit .visual-sign-box.selected .temp-move-tool{ display: block; }
.visual-mod.visual-mod-edit .temp-move-tool{ position: absolute; right: -42px; bottom: -25px; width: 40px; height: 24px; line-height: 24px; font-size: 12px; text-align: center; background-color: #000; color: #FFF; white-space: nowrap; cursor: all-scroll;}
.visual-mod.visual-mod-edit .isShowPanelItemBoxBorderFlag .visual-sign-box{ outline: 1px solid #E94709; }
.visual-mod.visual-mod-edit .visual-content-mod.isShowPanelBgBorderFlag{ background: -webkit-linear-gradient(top,transparent 19px,#dadada 20px),-webkit-linear-gradient(left,transparent 19px,#dadada 20px); background-size: 20px 20px;}
.visual-mod.visual-mod-edit .visual-sign-box.selected{ outline: 3px solid #8841AB;}
/* 编辑模板-编辑模式-编辑模板 */
.visual-mod.visual-mod-edit-temp .visual-content-mod{ min-height: 1000px;}

/* 编辑模板-编辑模式-编辑内容 */
.visual-mod.visual-mod-edit-cont .temp-opera-l-mod{ display: none !important }
.visual-mod.visual-mod-edit-cont .temp-opera-r-mod{ display: none !important }
.visual-mod.visual-mod-edit-cont .temp-move-tool{ display: none !important; }
.visual-mod.visual-mod-edit-cont .hide-for-edit-cont{ display: none !important; }
.visual-mod.visual-mod-edit-cont .visual-sign-box{ outline: none !important; }
.visual-mod.visual-mod-edit-cont .visual-content-mod{ background-color: none !important; }
.visual-mod.visual-mod-edit-cont .sign-mod-edit-input:hover, .visual-mod.visual-mod-edit-cont .sign-mod-edit-textarea:hover{ outline: 1px solid rgb(0, 169, 244); }
.visual-mod.visual-mod-edit-cont .visual-sign-box.selected .temp-move-tool{ display: none !important; }

/* 编辑模板-预览模式 */
.visual-mod-editpage-prev{ letter-spacing: -4px; }
.visual-mod-editpage-prev .visual-sign-box{ border: 1px solid #E94709; }

/* 编辑模板-编辑模式-挂件 */
.visual-mod .edit-temp-pendant-mod{}
.visual-mod .edit-temp-pendant-mod .padant-item{ padding: 2px 0; white-space: nowrap;}
.visual-mod .edit-temp-pendant-mod .padant-l{ display: inline-block; vertical-align: top; width: 80px; margin-right: 4px; text-align: right; font-size: 12px; line-height: 28px;}
.visual-mod .edit-temp-pendant-mod .padant-c{ display: inline-block; width: 100px; vertical-align: top;}
.visual-mod .edit-temp-pendant-mod .padant-r{ display: inline-block; width: 70px; margin-left: 8px;}
.visual-mod .edit-temp-pendant-mod .padant-c-r{ display: inline-block; width: 162px; }

/* 编辑模板-编辑模式-待添加组件群 */

/* 图片容器 */
.visual-mod .temp-upload-load-mod .ivu-upload .ivu-upload-select{ width: 100%; height: 100%; }
.visual-mod .temp-upload-load-mod .ivu-upload-list{ display: none !important; }

/* 操作工具栏-左 */
.visual-mod .temp-opera-l-mod{ position: fixed; top: 60px; bottom: 20px; left: 10px; z-index: 11; display: none; width: 250px; background-color: #FFF; box-shadow: 2px 2px 4px #DDD; transition: left 0.5s;}
.visual-mod .temp-opera-l-mod .tool-l-head{ padding: 0 8px; line-height: 24px; text-align: left; font-size: 12px; color: #666; background-color: #F9F9F9;}
.visual-mod .temp-opera-l-mod .tool-l-content{ height: calc(~"100% - 36px"); overflow-y: auto;}
.visual-mod .temp-opera-l-mod .tool-l-head-line{ line-height: 44px; padding: 0px 20px; font-size: 13px;}
.visual-mod .temp-opera-l-mod .wait-add-list-mod{ width: 240px; margin: 0 auto;}
.visual-mod .temp-opera-l-mod .wait-add-list-mod:after{ content: ''; display: block; clear: both; }
.visual-mod .temp-opera-l-mod .wait-add-list-mod .wait-add-item{ float: left; width: 33.3%; height: 72px; outline: 1px solid #DDD; text-align: center; cursor: pointer;}
.visual-mod .temp-opera-l-mod .wait-add-list-mod .wait-add-item:hover{ outline-color: #4F8FAB; }
.visual-mod .temp-opera-l-mod .wait-add-list-mod .wait-add-img-box{ width: 40px; height: 40px; margin: 4px auto 0; background-repeat: no-repeat; background-position: center;}
.visual-mod .temp-opera-l-mod .wait-add-list-mod .wait-add-ms{ font-size: 12px; line-height: 1; margin-top: 6px;}
.visual-mod .temp-opera-l-mod .temp-shrink-icon{ position: absolute; top: 50%; right: -24px; width: 24px; cursor: pointer; font-size: 16px;}
.visual-mod .temp-opera-l-mod .temp-shrink-icon .temp-shrink-l{}
.visual-mod .temp-opera-l-mod .temp-shrink-icon .temp-shrink-r{ display: none; }
.visual-mod .temp-opera-l-mod.shrink-hide .temp-shrink-icon .temp-shrink-l{ display: none;}
.visual-mod .temp-opera-l-mod.shrink-hide .temp-shrink-icon .temp-shrink-r{ display: block;}
.visual-mod .temp-opera-l-mod.shrink-hide{ left: -250px; }

.visual-mod .wait-add-list-mod .wait-add-item.element_common_square .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_common_square.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_common_circular .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_common_circular.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_common_img .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_common_img.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_common_straight_line .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_common_straight_line.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_common_dotted_line .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_common_dotted_line.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_common_table .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_common_table.png);}


.visual-mod .wait-add-list-mod .wait-add-item.element_input_text .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_input_text.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_input_textarea .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_input_textarea.png);}


.visual-mod .wait-add-list-mod .wait-add-item.element_chart_bar .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_chart_bar.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_chart_line .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_chart_line.png);}
.visual-mod .wait-add-list-mod .wait-add-item.element_chart_striptype .wait-add-img-box{ background-image: url(./../images/visualEditTempIcons/element_chart_striptype.png);}



/* 操作工具栏-右 */
.visual-mod .temp-opera-r-mod{ position: fixed; top: 60px; bottom: 20px; right: 0px; z-index: 11; display: none; width: 300px; background-color: #fff; transition: right 0.5s;}
.visual-mod .temp-opera-r-mod .tool-l-head{ line-height: 24px; text-align: center; background-color: #999; font-size: 18px; line-height: 2; color: #FFF;}
.visual-mod .temp-opera-r-mod .tool-l-head-line{ font-weight: bold; line-height: 24px; padding: 4px 20px; font-size: 14px; color: #000; border-top: 1px solid #DDD; margin-top: 10px;}
.visual-mod .temp-opera-r-mod .wait-add-list-mod{ border-bottom: 1px solid #DDD; }
.visual-mod .temp-opera-r-mod .t-con-tab-item-box{ height: 100%; padding-top: 30px; box-sizing: border-box; overflow-y: auto; }
.visual-mod .temp-opera-r-mod .temp-opera-box-line{ text-align: center;}
.visual-mod .temp-opera-r-mod .temp-opera-box-line > .el-button{}
.visual-mod .temp-opera-r-mod .edit-box-text-num{ padding: 10px 20px; }
.visual-mod .temp-opera-r-mod .tool-head-tab-box{ position: absolute; top: 0; left: 0; z-index: 8; width: 100%; display: flex; white-space: nowrap; line-height: 30px; font-size: 12px; border-bottom: 1px solid #e8e8e8; text-align: center;}
.visual-mod .temp-opera-r-mod .tool-head-tab-box .t-head-tab-item{ flex: 1; cursor: pointer; background-color: #F9F9F9; color: #333;}
.visual-mod .temp-opera-r-mod .tool-head-tab-box .t-head-tab-item.selected{ background-color: #FFF; color: #00A9F4;}
.visual-mod .temp-opera-r-mod .t-con-tab-item{ display: none; padding: 10px 0;}
.visual-mod .temp-opera-r-mod .t-con-tab-item.selected{ display: block;}
.visual-mod .temp-opera-r-mod .temp-shrink-icon{ position: absolute; top: 50%; left: -24px; width: 24px; cursor: pointer; text-align: right;}
.visual-mod .temp-opera-r-mod .temp-shrink-icon .temp-shrink-l{ display: block;}
.visual-mod .temp-opera-r-mod .temp-shrink-icon .temp-shrink-r{ display: none; }
.visual-mod .temp-opera-r-mod.shrink-hide .temp-shrink-icon .temp-shrink-l{ display: none; }
.visual-mod .temp-opera-r-mod.shrink-hide .temp-shrink-icon .temp-shrink-r{ display: block; }
.visual-mod .temp-opera-r-mod.shrink-hide{ right: -300px; }
.visual-mod .temp-opera-r-mod .wait-assist-item{ line-height: 24px; padding: 0 12px; font-size: 12px;}